<?php
echo $this->headScript()->
        appendFile($this->baseUrl() . "/js/jquery-1.7.1.js")->
        appendFile($this->baseUrl() . "/js/bootstrap/bootstrap.js")->
        appendFile($this->baseUrl() . "/js/jquery.validate.js");

echo $this->headLink()
        ->setIndent('  ')
        ->prependStylesheet($this->baseUrl() . "/css/bootstrap/bootstrap.css")
        ->prependStylesheet($this->baseUrl() . "/css/bootstrap/bootstrap-responsive.css");
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
        <title>Laboratorios Virtuales</title>    

        <style type="text/css">
            /* Override some defaults */
            html, body {        background-color: #eee;
            }
            body {
                padding-top: 40px; 
            }
            .container {
                width: 400px;
            }

            /* The white background content wrapper */
            .container > .content {
                background-color: #fff;
                padding: 20px;
                margin: 0 -20px; 
                -webkit-border-radius: 10px 10px 10px 10px;
                -moz-border-radius: 10px 10px 10px 10px;
                border-radius: 10px 10px 10px 10px;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
            }

            .login-form {
                margin-left: 65px;
            }

            legend {
                margin-right: -50px;
                font-weight: bold;
                color: #404040;
            }

        </style>
        <script type="text/javascript">
            function hideAlert() {
                $("#value-alert").hide(1000);
            }
            $(document).ready(function() {
                setTimeout("hideAlert()", 7500);

                $("#login-form").validate({
                    rules: {
                        username: {
                            required: true
                        },
                        password: {
                            required: true
                        }
                    },
                    messages: {
                        username: "Username requerido",
                        password: "Password requerido"
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="login-form">
                        <h2>Login</h2>
                        <form id="login-form" action="<?php echo $this->url(array('module' => 'admin', 'controller' => 'login', 'action' => 'login')); ?>" method="post">
                            <div class="clearfix">
                                <input type="text" id="username" name="username">
                            </div>
                            <div class="clearfix">
                                <input type="password" id="password" name="password">
                            </div>
                            <button  class="btn btn-inverse" >Sign in</button>
                            <a href="<?php echo $this->url(array('module' => 'admin', 'controller' => 'login', 'action' => 'passwordforgot')); ?>">Olvid&oacute; su password?</a>
                            <?php echo $this->loginError; ?>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div> <!-- /container -->
    </body>
</html>
